<template>
	<div>
		<el-dialog
			:title="title"
			:visible.sync="visible"
			:close-on-click-modal="false"
			append-to-body
			width="60%"
			:before-close="dialogBeforeClose"
			@closed="handlerClosed"
		>
			<el-form
				ref="form"
				:model="formData"
				:rules="rules"
				label-width="120px"
				:inline="false"
				size="normal"
			>
				<el-row>
					<el-col :span="12">
						<el-form-item label="科室代码" prop="deptCode">
							<el-input v-model="formData.deptCode" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="科室名称" prop="deptName">
							<el-input v-model="formData.deptName" clearable />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="科室类别" prop="deptType">
							<el-select
								v-model="formData.deptType"
								placeholder="请选择"
								clearable
							>
								<el-option
									v-for="item in deptTypeList"
									:key="item.value"
									:label="item.display"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否为ICU科室" prop="isIcuFlag">
							<el-select
								v-model="formData.isIcuFlag"
								placeholder="请选择"
								clearable
							>
								<el-option
									v-for="item in isIcuFlag"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="科室所属类型" prop="deptBelongingType">
							<el-select
								v-model="formData.deptBelongingType"
								placeholder="请选择"
								clearable
							>
								<el-option
									v-for="item in deptBelongingTypeList"
									:key="item.value"
									:label="item.display"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否特色科室" prop="isCharacteristicDeptFlag">
							<el-select
								v-model="formData.isCharacteristicDeptFlag"
								placeholder="请选择"
								clearable
							>
								<el-option
									v-for="item in isIcuFlag"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="是否启用" prop="whetherEnable">
							<el-select
								v-model="formData.whetherEnable"
								placeholder="请选择"
								clearable
							>
								<el-option
									v-for="item in whetherEnableList"
									:key="item.value"
									:label="item.display"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="formData.remark" type="textarea" clearable />
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item>
					<el-button type="primary" size="medium" @click="onSubmit">
						确定
					</el-button>
					<el-button size="medium" @click="handlerCancel"> 取消 </el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { codeCheck } from '@/http/org'
export default {
	props: {
		deptData: {
			type: Object,
			default: () => {
				return {}
			},
		},
		visible: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '',
		},
		deptDialogType: {
			type: String,
			default: '',
		},
		deptBelongingTypeList: {
			type: Array,
			default: () => {
				return []
			},
		},
		deptTypeList: {
			type: Array,
			default: () => {
				return []
			},
		},
		whetherEnableList: {
			type: Array,
			default: () => {
				return []
			},
		},
		rowRepetition: {
			type: String,
			default: '',
		},
	},
	data() {
		var spCodeValidator = this.spCodeFun
		return {
			isIcuFlag: [
				{
					value: '1',
					label: '否',
				},
				{
					value: '0',
					label: '是',
				},
			],
			rules: {
				deptName: [
					{ required: true, message: '请输入科室名称', trigger: 'blur' },
				],
				deptCode: [
					{ required: true, message: '请输入科室代码', trigger: 'blur' },
					{ validator: spCodeValidator, trigger: 'blur' },
				],
				// deptType: [
				// 	{ required: true, message: '请选择科室类别', trigger: 'blur' },
				// ],
				isIcuFlag: [
					{ required: true, message: '请选择是否为ICU科室', trigger: 'blur' },
				],
				deptBelongingType: [
					{ required: true, message: '请选择科室所属类型', trigger: 'blur' },
				],
				isCharacteristicDeptFlag: [
					{ required: true, message: '请选择是否特色科室', trigger: 'blur' },
				],
				whetherEnable: [
					{ required: true, message: '请选择是否启用', trigger: 'blur' },
				],
			},
		}
	},
	computed: {
		formData() {
			return this.deptData
		},
		headers() {
			let token = JSON.parse(window.localStorage.getItem('userMsg')).token
			return {
				Authorization: token,
			}
		},
	},
	watch: {},
	methods: {
		// 机构代码唯一性校验
		spCodeFun(rule, value, callback) {
			codeCheck({
				id: this.rowRepetition,
				orgCode: value,
				parentUuid: this.formData.orgId,
			})
				.then(({ data }) => {
					if (data.head.code == 200) {
						callback()
					}
				})
				.catch(({ data }) => {
					if (data.head.code == 400) {
						callback(new Error('科室代码不能重复'))
						return
					} else {
						callback()
					}
				})
		},
		dialogBeforeClose() {
			this.$emit('update:visible', false)
		},
		handlerClosed() {
			this.$emit('update:deptData', {
				parentUuid: '',
				orgCode: '',
				orgName: '',
				deptType: '',
				isIcuFlag: '1',
				officeType: '2',
				deptBelongingType: '',
				isCharacteristicDeptFlag: '1',
				whetherEnable: '0',
				remark: '',
			})
			this.handlerResetFields()
		},
		onSubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					if (this.deptDialogType == '1') {
						this.formData.parentUuid = JSON.parse(
							window.localStorage.getItem('userMsg'),
						).orgId
					}
					this.formData.orgCode = this.formData.deptCode
					this.formData.orgName = this.formData.deptName
					this.$emit('submit', this.formData, this.deptDialogType)
					this.handlerCancel()
				} else {
					return false
				}
			})
		},
		handlerCancel() {
			this.handlerResetFields()
			this.dialogBeforeClose()
			this.handlerClosed()
		},
		handlerResetFields() {
			this.$nextTick(() => {
				this.$refs['form'].clearValidate()
			})
		},
	},
}
</script>

<style lang="scss" scoped></style>
